<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <canvas id="canvasgl" width="800" height="600">
      your browser don't support canvas
    </canvas>

    <script src="../lib/webgl-utils.js"></script>
    <script src="../lib/webgl-debug.js"></script>
    <script src="../lib/cuon-utils.js"></script>

    <script>
      var VSHADER_SOURCE = `
           attribute vec4 a_Position;
           attribute vec2 a_TexCoord;
           varying vec2 v_TexCoord;
           void main(){
               gl_Position = a_Position;
               v_TexCoord = a_TexCoord;
           }
         `;

      var FSHADER_SOURCE = `
           precision mediump float;
           uniform sampler2D u_Sampler;
           varying vec2 v_TexCoord;
           void main(){
               gl_FragColor = texture2D(u_Sampler, v_TexCoord);
           }
         `;

      function main() {
        var canvas = document.getElementById("canvasgl");
        /** @type {WebGLRenderingContext}*/
        var gl = getWebGLContext(canvas);
        if (!gl) throw new Error("can't get webgl context");

        if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
          throw new Error("can't init shaders");
        }

        var n = initVertextBuffers(gl);
        if(n < 0){
          console.log("failed to set the vertex information");
          return;
        }

        gl.clearColor(0.0, 0.0, 0.0, 1.0);
        if (!initTextures(gl, n)) {
          console.log("failed to initialize the texture");
        }
      }
      main();

      function initVertextBuffers(/** @type {WebGLRenderingContext}*/gl) {
        var verticesTexCoords = new Float32Array([
          // vertex coordinate, texture coordinate
          -0.5, 0.5, 0.0, 1.0, 
          -0.5, -0.5, 0.0, 0.0,
          0.5, 0.5, 1.0, 1.0,
          0.5, -0.5, 1.0, 0.0,
        ]);
        var n = 4;
        var vertexTexCoordBuffer = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, vertexTexCoordBuffer);
        gl.bufferData(gl.ARRAY_BUFFER, verticesTexCoords, gl.STATIC_DRAW);

        var FSIZE = verticesTexCoords.BYTES_PER_ELEMENT;

        var a_Position = gl.getAttribLocation(gl.program, "a_Position");
        gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, FSIZE * 4, 0);
        gl.enableVertexAttribArray(a_Position);

        var a_TexCoord = gl.getAttribLocation(gl.program, "a_TexCoord");
        gl.vertexAttribPointer(
          a_TexCoord,
          2,
          gl.FLOAT,
          false,
          FSIZE * 4,
          FSIZE * 2
        );
        gl.enableVertexAttribArray(a_TexCoord);

        return n;
      }

      function initTextures(gl, n) {
        var texture = gl.createTexture();
        var u_Sampler = gl.getUniformLocation(gl.program, "u_Sampler");
        var image = new Image();
        image.onload = function () {
          loadTexture(gl, n, texture, u_Sampler, image);
        };
        image.onerror = function(e){
          console.log(e);
        }
        image.src = "../textures/sky.JPG";
        return true;
      }

      function loadTexture(/**@type {WebGLRenderingContext}*/gl, n, texture, u_Sampler, image) {
        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1);
        gl.activeTexture(gl.TEXTURE0);
        gl.bindTexture(gl.TEXTURE_2D, texture);

        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
        gl.texImage2D(
          gl.TEXTURE_2D,
          0,
          gl.RGB,
          gl.RGB,
          gl.UNSIGNED_BYTE,
          image
        );
        gl.uniform1i(u_Sampler, 0);

        gl.clear(gl.COLOR_BUFFER_BIT);
        gl.drawArrays(gl.TRIANGLE_STRIP, 0, n);
      }
    </script>
  </body>
</html>
